<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>03_姓名案例_计算属性实现</title>
</head>
<body>
    
    <!-- 
       计算属性：
            0.刘旭补充：计算属性定义在 computed 属性中
            1.定义：要用的属性不存在，要通过已有的属性计算得来。
            2.原理：底层借助 Object.defineproperty 方法体提供的 getter 和 setter 。
            3.get 函数什么时候执行？   
                    (1). 当初此读取时候执行一次
                    (2). 当所依赖的属性发生改变时会被再次调用
            4.优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便(在开发着工具能够看到)
            5.备注：
                1.计算属性最终会出现时 vm 上，直接读取使用即可。
                2.如果计算属性要被修改，那必须写 set 函数去响应修改，否则报错；且set中要引起就算时依赖的数据发生改变。
     -->


    <!-- 容器 -->
    <div id="root">
        姓：<input type="text" v-model="nameOne"><br>
        名：<input type="text" v-model="nameLast"><br>
        测试你好：<input type="text" value=""><br>
        姓名： <span>{{fullName}}</span> <br/>
        姓名： <span>{{fullName}}</span> <br/>
        姓名： <span>{{fullName}}</span> <br/>
        姓名： <span>{{fullName}}</span>  
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。
       
      
       const vm = new Vue({
            el:'#root',
            data:{
                nameOne : '张',
                nameLast: '三'
            },
            computed:{
                fullName:{
                    // get 有什么用?
                    //      当有人读取fullName时，get就会被调用，且返回值作为 fullName 的值
                    // get 什么时候调用？
                    //     1.初次读取 fullName 时。 2.所依赖的数据发生改变时。
                    get(){
                        console.log('get被调用');
                        // 此处的 this 执行 vm
                        // console.log('@',this);
                        return this.nameOne + '-' + this.nameLast;
                    },
                    // set 什么时候调用？
                    //      当 fullName 被改变时调用
                    set(value){
                        console.log('@',value);
                        const arr = value.split('-');
                        this.nameOne = arr[0];
                        this.nameLast = arr[1];

                    }

                }
            },
            methods:{
                
            }
        })
        // console.log(vm);
       
    </script>
</body>
</html>